import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Modal, Form, Input, Button, Select } from 'antd';

// import api from '../../utils/api';

const { Option } = Select;

const mapStateToProps = (state) => ({});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {},
    dispatch,
  ),
});

export const KehuFrom = Form.create()(
  connect(mapStateToProps, mapDispatchToProps)(class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        typeValue: null
      };
      this.formLayout = {
        labelCol: { span: 7 },
        wrapperCol: { span: 13 },
      };
    }

    onClose = () => {
      const { form, clossModal } = this.props;
      form.resetFields();
      clossModal();
    }

    onSave = () => {
      const { form } = this.props;
      form.validateFields((err, values) => {
        if (err) {
          return;
        }
        console.log(values);
      });
    }

      render() {
        const { showAddModal, form } = this.props;
        const { getFieldDecorator } = form;
        const FormItem = Form.Item;
        return (
          <div>
            <Modal
              maskClosable={false}
              visible={showAddModal}
              title="新增客户"
              footer={[
                <Button key="back" onClick={this.onClose}>取消</Button>,
                <Button key="submit" type="primary" onClick={this.onSave}>提交</Button>
              ]}
            >
              <Form>
                <FormItem label="账户" {...this.formLayout}>
                  {getFieldDecorator('account', {
                    rules: [{ required: true, message: '请输入账户' }],
                    // initialValue: currentItem.deviceGuid,
                  })(
                    <Input placeholder="请输入账户" />
                  )}
                </FormItem>
                <FormItem label="密码" {...this.formLayout}>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入密码' }],
                    // initialValue: currentItem.deviceGuid,
                  })(
                    <Input placeholder="请输入密码" />
                  )}
                </FormItem>
                <FormItem label="费率" {...this.formLayout}>
                  {getFieldDecorator('rate', {
                    rules: [{ required: true, message: '请输入费率' }],
                    // initialValue: currentItem.deviceGuid,
                  })(
                    <Input placeholder="请输入费率" />
                  )}
                </FormItem>
                <FormItem label="同步回调地址" {...this.formLayout}>
                  {getFieldDecorator('return_url', {
                    rules: [{ required: true, message: '请输入同步地址' }],
                    // initialValue: currentItem.deviceGuid,
                  })(
                    <Input placeholder="请输入同步地址" />
                  )}
                </FormItem>
                <FormItem label="异步回调地址" {...this.formLayout}>
                  {getFieldDecorator('notify_url', {
                    rules: [{ required: true, message: '请输入异步地址' }],
                    // initialValue: currentItem.deviceGuid,
                  })(
                    <Input placeholder="请输入异步地址" />
                  )}
                </FormItem>
                <FormItem label="通道" {...this.formLayout}>
                  {getFieldDecorator('channel_type', {
                    rules: [{ required: true, message: '请选择通道' }],
                    // initialValue: currentItem.tenantId,
                  })(
                    <Select placeholder="请选择通道" >
                        <Option value="vary">个码</Option>
                        <Option value="fixed">固码</Option>
                        <Option value="all">全部</Option>
                    </Select>
                  )}
                </FormItem>
              </Form>
            </Modal>
          </div>
        );
      }
  })
);
